<template>
  <Modal v-model="modal"  title="导入Excel数据"
   width="400"
 >
   <div  class="content">
       <span class="label">
           导入模板:
       </span>
        <Upload
              :action="fileUploadUrl"
              :data="{id:htdId}"
              :on-remove="handleFileRemove"
              :on-success="handleFileUpload"
              :show-upload-list="false"
              :headers="uploadHeader"
              name="file"
              ref="upload"
        >
        <Button icon="ios-cloud-upload-outline">上传导入模板</Button>
    </Upload>
       <!-- <Upload
              :action="fileUploadUrl"
              :on-remove="handleFileRemove"
              :on-success="handleFileUpload"
              :show-upload-list="false"
              :headers="uploadHeader"
              name="sign"
              ref="upload"
            >
              <Button
                icon="ios-cloud-upload-outline"
                type="primary"
                >上传导入模板</Button
              >
            </Upload> -->
       <span class="a-link" v-show="!showTemplate">
           <a href="https://qa.ccnc.cc/qaapi/signPic/images/configfiles/template.xlsx">{{templateName}}</a>
       </span>
   </div>
   <!-- <div  class="content">
       <span class="label">
           上传文档:
       </span>
       <Upload
              :action="fileUploadUrl"
              :on-remove="handleFileRemove"
              :on-success="handleFileUpload"
              :show-upload-list="false"
              :headers="uploadHeader"
              name="sign"
              ref="upload"
            >
              <Button
                icon="ios-cloud-upload-outline"
                type="primary"
                >上传导入模板</Button
              >
            </Upload>
       <span class="a-link"  v-show="!showDocument">
           {{documentName}}
       </span>
   </div> -->
    <template #footer>
           <div></div>
    </template>
  </Modal>
</template>

<script>
import apiObj from '@/api/project-partition.js';
import { getHTTP, getToken } from '@/libs/util';
import config from '@/config';

export default {
  props: {
    htdId: {
      required: true
    }
  },
  data () {
    return {
      modal: false,
      showTemplate: false,
      showDocument: true,
      templateName: '项目树划分导入模板',
      documentName: '项目树划分',
      fileUploadUrl: getHTTP() + `${config.baseUrl.pro}/pt/import`,
      uploadHeader: {
        Authorization: getToken()
      }
    };
  },
  methods: {
    show () {
      this.modal = true;
      console.log(this.htdId);
    },
    // 选择了当前分部的类型
    async selectRootType () {
      if (!this.$refs.select.values[0]) {
        return;
      }
      const { label, value } = this.$refs.select.values[0];
      this.secondList.push({ type: label });
      // this.secondList[0].type = label;
      this.firstType = label;
      this.showTable = true;
      const send = {
        nodeTypeId: 8, // 当前节点类型id
        pNodeTypeId: 6, // 父节点类型id
        pLevelTypeId: value // 父节点层级类型id
      };
      const res = await apiObj.selectFXGCList(send);
      this.getDefaultCode(res.data.data, value);
    },
    handleInputTemplate (response) {
      console.log(response, 'response');
    },
    handleFileUpload (res) {
      if (res.code == 200) {
        this.$Message.success(res.data);
        this.modal = false;
      }
    },
    handleFileRemove () {
    },
    handleComfirm () {
      console.log('确认');
    },
    handleCancel () {
      this.modal = false;
    }
  }
};
</script>

<style lang="less" scoped>

/deep/ .ivu-modal-body {
    padding:15px;
    // padding-left:0
}
.content{
    font-size:16px;
    color:#333;
    margin-left:10px;
    line-height:30px;
}
.a-link{
    &:hover{
        cursor:pointer
    }
    color:#2b85e4;
    text-decoration: underline;
}

</style>
